<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="js/flexible_css.debug (1).js"></script>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="dist/css/swiper.min.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>

        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="images/img_01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/img_01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/img_01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/img_01.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="images/img_01.png" alt="">
                </div>
            </div>
            <!-- Add Scrollbar -->
            <div class="swiper-scrollbar"></div>
        </div>
        <header class="header">
            <div class="div_box">
                <img src="images/img__03.png" alt="">
                <p>热门话题</p>
            </div>
            <div class="div_box">
                <img src="images/img__06.png" alt="">
                <p>名厨直播</p>
            </div>
            <div class="div_box">
                <img src="images/img__08.png" alt="">
                <p>每周榜单</p>
            </div>
            <div class="div_box">
                <img src="images/img__10.png" alt="">
                <p>菜品专题</p>
            </div>
        </header>
        <main class="main">
            <img src="images/img_03.png" alt="">
            <img src="images/img_07.png" alt="">
        </main>
        <footer class="footer">
            <div>
                <img src="images/foot_14.png" alt="">
                <p>推荐</p>
            </div>
            <div>
                <a href="html/find.html">
                    <img src="images/foot_22.png" alt="">
                    <p>发现</p>
                </a>
            </div>
            <div>
                <a href="html/issue.html">
                    <img src="images/foot_11.png" alt="">
                    <p>发布</p>
                </a>
            </div>
            <div>
                <a href="html/move.html">
                    <img src="images/foot_17.png" alt="">
                    <p>动态</p>
                </a>
            </div>
            <div>
                <a href="html/my.html">
                    <img src="images/foot_19.png" alt="">
                    <p>我的</p>
                </a>
            </div>
        </footer>
        <script src="js/swiper.min.js"></script>
        <script src="js/flexible.debug (1).js"></script>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            var swiper = new Swiper('.swiper-container', {
                scrollbar: '.swiper-scrollbar',
                scrollbarHide: true,
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 30,
                grabCursor: true
            });
        </script>

    </body>
</html>